<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
        <link href="../img/icon.ico" rel="shortcut icon"/>
		<link rel="stylesheet" href="../layui/css/layui.css" />
        <link rel="stylesheet" href="../css/element.min.css?1" />
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_2315128_5bb2ydgeqs.css">
        <link rel="stylesheet" href="../css/reset.css?3123">
        <link rel="stylesheet" href="../css/setlayui.css?12">
        <link rel="stylesheet" href="../css/viewer.min.css">
		<script src="../layui/layui.all.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript" src="../js/element.min.js"></script>
        <script src="../js/viewer.min.js"></script>
    </head>
	<body>
        <div id="app" class="page-container" style="display: none;" v-show="showApp">
            <div class="contetn_box">
                <div class="form_box">
                    <div class="form_item">
                        <div class="form_name">省份</div>
                        <div class="form_cont">
                            <el-select @change="provinceChange" class="public_input" v-model="provinceId"  placeholder="">
                                <el-option
                                    v-for="item in province"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">城市</div>
                        <div class="form_cont">
                            <el-select @change="citychange" class="public_input" v-model="cityId" placeholder="">
                                <el-option
                                    v-for="item in cityObj[provinceId]"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                    <div class="form_item">
                        <div class="form_name">详细地址</div>
                        <div class="form_cont">
                            <el-input class="public_input" placeholder="" v-model="addressDetail" clearable> </el-input>
                        </div>
                    </div>
                    <div class="form_but" style="margin-left: 20px;">
                        <el-button @click="searchBut" class="border_but" type="primary">查询</el-button>
                    </div>
                    
                </div>
                <div id="allmap" style="height: calc(100% - 52px);width: 100%;"></div>
            </div>
            <div class="but_box" style="display: block;">
                <div class="form_item" style="justify-content: center;">
                    <div class="form_name">已选:</div>
                    <div class="form_cont">
                        {{selectObj.address}}
                    </div>
                </div>
                <div style="display: flex;align-items: center;justify-content: center;">
                    <el-button @click="cancels" class="cancelClass">取消</el-button>
				    <el-button @click="confirms" type="primary" style="margin-left: 120px">提交</el-button>
                </div>
            </div>
        </div>
        <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=33FBZ-2ZBKD-SQW43-PNZOH-PTCT6-QTBHK"></script>
        <script src="../js/area.js"></script>
		<script src="../js/public.js?12345"></script>
		<script>
			var layer = layui.layer
			var vm = new Vue({
				el: '#app',
				data() {
					return {
                        showApp: false,
                        map: "",
                        province: [],
                        cityObj: {},
                        allCity: {},
                        mapCity: '',
                        addressDetail: '',
                        provinceId: '',
                        cityId: '',
                        local: '',
                        lightPoint: false,
                        newmarker: '',
                        selectObj: {},
                        geocoder: '',
                        searchService: '',
                        allMarker: []
					};
				},
				methods: {
                    provinceChange () {
                        this.cityId = ''
                    },
                    citychange () {
                        this.geocoder.getLocation(this.allCity[this.cityId])
                    },
                    searchBut () {
                        this.selectObj = {}
                        if (this.allMarker.length > 0) {
                            for (var i = 0; i < this.allMarker.length;i++) {
                                this.allMarker[i].setMap(null)
                            }
                            this.allMarker = []
                        }
                        if (this.newmarker) {
                            this.newmarker.setMap(null)
                            this.newmarker = ''
                        }
                        if (this.addressDetail) {
                            this.searchService.setLocation(this.allCity[this.cityId]);
                            this.searchService.search(this.addressDetail);
                        }
                    },
                    initMap() {
                        var that = this
                        var ResultArray = []
                        // this.mapCity
                        var callbacks = {
                            //若服务请求成功，则运行以下函数，并将结果传入 
                            complete: function(result) {
                                that.map.panTo(new qq.maps.LatLng(result.detail.location.lat, result.detail.location.lng));
                            },
                            //若服务请求失败，则运行以下函数 
                            error: function() {
                                alert("服务器出错了");
                            }
                        }
                        var callbacks2 = {
                            //若服务请求成功，则运行以下函数，并将结果传入 
                            complete: function(result) {
                                console.log(result)
                            },
                            //若服务请求失败，则运行以下函数 
                            error: function() {
                                alert("服务器出错了");
                            }
                        }
                        this.geocoder = new qq.maps.Geocoder(callbacks)
                        var map = new qq.maps.Map(document.getElementById("allmap"),{
                            center: new qq.maps.LatLng(39.914850, 116.403765),
                            zoom: 11,
                            showControl: false
                        })
                        this.searchService = new qq.maps.SearchService({
                            pageCapacity: 20,
                            complete: function (res) {
                                for (var i = 0; i < res.detail.pois.length; i++) {
                                    that.addMarker(res.detail.pois[i].latLng.lat, res.detail.pois[i].latLng.lng, res.detail.pois[i])
                                }
                            }
                        })
                        qq.maps.event.addListener(map, 'click', function(e) {
                            var latLng = new qq.maps.LatLng(e.latLng.lat, e.latLng.lng);
                            xLoading(true, '请稍后')
                            $.ajax({
                                type: "get",
                                url: "https://apis.map.qq.com/ws/geocoder/v1/",
                                data: {
                                    location: e.latLng.lat+ ',' + e.latLng.lng,
                                    key: '33FBZ-2ZBKD-SQW43-PNZOH-PTCT6-QTBHK',
                                    output: 'jsonp'
                                },
                                dataType: "jsonp",
                                success: function(json){
                                    xLoading(false)
                                    console.log(json)
                                    if (json.status == 0) {
                                        var point = new qq.maps.LatLng(json.result.location.lat, json.result.location.lng);
                                        if (that.lightPoint) {
                                            that.selectObj = {}
                                            if (that.newmarker) {
                                                that.newmarker.setMap(null)
                                            }
                                        }
                                        var myicon2 = new qq.maps.MarkerImage("../img/icon5.png",'', '','', new qq.maps.Size(40, 40))
                                        that.newmarker = new qq.maps.Marker({
                                            position: point,
                                            map: that.map,
                                            icon: myicon2,
                                            title: json.result.formatted_addresses.recommend
                                        });
                                        // 增加省市区 result -> address_component：{ province:"", city: "", district: ""}
                                        that.selectObj = {
                                            latLng: {
                                                lat: json.result.location.lat,
                                                lng: json.result.location.lng
                                            },
                                            needAdd: [json.result.address_component.province, json.result.address_component.city, json.result.address_component.district],
                                            name: json.result.formatted_addresses.recommend,
                                            address: json.result.address_component.province + json.result.address_component.city + json.result.formatted_addresses.recommend
                                        }
                                        that.lightPoint = true
                                    }
                                    
                                },
                                error: function(){
                                }
                            });
                        });
                        this.map = map;
                        this.geocoder.getLocation(this.mapCity)
                    },
                    
                    addMarker(latitude, longitude, params) {
                        var that = this;
                        var point = new qq.maps.LatLng(latitude, longitude);
                        var myicon = new qq.maps.MarkerImage("../img/icon4.png",'', '','', new qq.maps.Size(40, 40))
                        var marker = new qq.maps.Marker({
                            position: point,
                            map: that.map,
                            icon: myicon,
                            title: params.name
                        });
                        that.allMarker.push(marker)
                        qq.maps.event.addListener(marker, 'click', function() {
                            if (that.lightPoint) {
                                that.selectObj = {}
                                that.newmarker.setMap(null)
                            }
                            var myicon2 = new qq.maps.MarkerImage("../img/icon5.png",'', '','', new qq.maps.Size(40, 40))
                            that.newmarker = new qq.maps.Marker({
                                position: point,
                                map: that.map,
                                icon: myicon2,
                                title: params.name
                            });
                            that.selectObj = params
                            that.lightPoint = true
                        });
                    },
                    cancels () {
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },
                    confirms () {
                        if (!this.selectObj.latLng) {
                            this.$message({
                                message: '请选择位置',
                                type: 'warning',
                                duration: 1000
                            });
                            return false
                        }
                        var data = JSON.stringify(this.selectObj);
                        parent.$('#publicValue').val(data);
                        setTimeout(function() {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        }, 100);
                    },
                    setAddresArr () {
                        var addres = ADDRESS
                        var province = []
                        var cityObj = {}
                        var allCity = {}
                        var flag = true
                        for (var i in addres[0]) {
                            province.push({
                                id: 0 + ',' + i,
                                name: addres[0][i]
                            })
                            cityObj[0 + ',' + i] = []
                            for (var j in addres[0 + ',' + i]) {
                                cityObj[0 + ',' + i].push({
                                    id: 0 + ',' + i + ',' + j,
                                    name: addres[0 + ',' + i][j]
                                })
                            }
                            for (var j in addres[0 + ',' + i]) {
                                allCity[0 + ',' + i + ',' + j] = addres[0 + ',' + i][j]
                                if (addres[0 + ',' + i][j] == this.mapCity) {
                                    this.provinceId = 0 + ',' + i
                                    this.cityId = 0 + ',' + i + ',' + j
                                    flag = false
                                }
                            }
                        }
                        if (flag) {
                            this.provinceId = '0,110000'
                            this.cityId = '0,110000,110100'
                            this.mapCity = '北京市'
                        }
                        this.province = province
                        this.cityObj = cityObj
                        this.allCity = allCity
                        this.initMap()
                    },
				},
				mounted() {
                    this.showApp = true;
                    this.mapCity = decodeURIComponent(getQuerys('mapCity'))
                    this.setAddresArr()
				}
			});
		</script>
	</body>
	<style>
		.contetn_box {
            height: calc(100% - 80px);
            position: relative;
        }
        .form_box {
            display: flex;
            align-items: center;
            padding: 10px 30px;
        }
        .form_item {
            display: flex;
            align-items: center;
        }
        .form_name {
            padding-left: 20px;
            padding-right: 10px;
            white-space: nowrap;
        }
	</style>
</html>
